<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="A simple jQuery image viewing plugin.">
  <meta name="keywords" content="HTML, CSS, JS, JavaScript, jQuery plugin, image viewing, front-end, frontend, web development">
  <meta name="author" content="Fengyuan Chen">
  <title>Viewer</title>
  <link rel="stylesheet" href="../assets/css/bootstrap.min.css">
  <link rel="stylesheet" href="../dist/viewer.css">
  <link rel="stylesheet" href="css/main.css">

  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>
<body>
  <!--[if lt IE 8]>
    <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
  <![endif]-->

  <!-- Header -->
  <header class="navbar navbar-static-top docs-header" id="top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-target="#navbar-collapse" data-toggle="collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="./">Viewer</a>
      </div>
      <nav class="collapse navbar-collapse" id="navbar-collapse" role="navigation">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="https://github.com/fengyuanchen/viewer/blob/master/README.md">Docs</a></li>
          <li><a href="https://github.com/fengyuanchen/viewer">GitHub</a></li>
          <li><a href="https://fengyuanchen.github.io">More</a></li>
          <li><a href="http://chenfengyuan.com">About</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <!-- Jumbotron -->
  <div class="jumbotron docs-jumbotron">
    <div class="container">
      <h1>Viewer</h1>
      <p class="lead">A simple jQuery image viewing plugin.</p>
    </div>
  </div>

  <!-- Content -->
  <div class="container">
    <h1 class="page-header">Overview</h1>
    <div class="row">
      <div class="col-sm-12 col-md-3">
        <h3 class="page-header">Options</h3>
        <div class="docs-toggles">
          <div class="btn-group btn-group-justified" data-toggle="buttons" role="group">
            <label class="btn btn-primary active">
              <input type="radio" name="inline" data-value="false" autocomplete="off" checked> Modal mode
            </label>
            <label class="btn btn-primary">
              <input type="radio" name="inline" data-value="true" autocomplete="off"> Inline mode
            </label>
          </div>
          <button class="btn btn-primary btn-block hidden-md hidden-lg" id="toggle-options" data-target="#options" data-toggle="collapse" aria-expanded="true">Toggle options</button>
          <div class="docs-collapse collapse" id="options" aria-labelledby="toggle-options">
            <ul class="list-group">
              <li class="list-group-item">
                <label class="checkbox-inline">
                  <input type="checkbox" name="button" checked> button
                </label>
              </li>
              <li class="list-group-item">
                <label class="checkbox-inline">
                  <input type="checkbox" name="navbar" checked> navbar
                </label>
              </li>
              <li class="list-group-item">
                <label class="checkbox-inline">
                  <input type="checkbox" name="title" checked> title
                </label>
              </li>
              <li class="list-group-item">
                <label class="checkbox-inline">
                  <input type="checkbox" name="toolbar" checked> toolbar
                </label>
              </li>
              <li class="list-group-item">
                <label class="checkbox-inline">
                  <input type="checkbox" name="tooltop" checked> tooltop
                </label>
              </li>
              <li class="list-group-item">
                <label class="checkbox-inline">
                  <input type="checkbox" name="movable" checked> movable
                </label>
              </li>
              <li class="list-group-item">
                <label class="checkbox-inline">
                  <input type="checkbox" name="zoomable" checked> zoomable
                </label>
              </li>
              <li class="list-group-item">
                <label class="checkbox-inline">
                  <input type="checkbox" name="rotatable" checked> rotatable
                </label>
              </li>
              <li class="list-group-item">
                <label class="checkbox-inline">
                  <input type="checkbox" name="scalable" checked> scalable
                </label>
              </li>
              <li class="list-group-item">
                <label class="checkbox-inline">
                  <input type="checkbox" name="transition" checked> transition
                </label>
              </li>
              <li class="list-group-item">
                <label class="checkbox-inline">
                  <input type="checkbox" name="fullscreen" checked> fullscreen
                </label>
              </li>
              <li class="list-group-item">
                <label class="checkbox-inline">
                  <input type="checkbox" name="keyboard" checked> keyboard
                </label>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="col-sm-8 col-md-6">
        <h3 class="page-header">Demo</h3>
        <div class="docs-galley">
          <ul class="docs-pictures clearfix">
            <li><img data-original="../assets/img/tibet-1.jpg" src="../assets/img/thumbnails/tibet-1.jpg" alt="Cuo Na Lake"></li>
            <li><img data-original="../assets/img/tibet-2.jpg" src="../assets/img/thumbnails/tibet-2.jpg" alt="Tibetan Plateau"></li>
            <li><img data-original="../assets/img/tibet-3.jpg" src="../assets/img/thumbnails/tibet-3.jpg" alt="Jokhang Temple"></li>
            <li><img data-original="../assets/img/tibet-4.jpg" src="../assets/img/thumbnails/tibet-4.jpg" alt="Potala Palace 1"></li>
            <li><img data-original="../assets/img/tibet-5.jpg" src="../assets/img/thumbnails/tibet-5.jpg" alt="Potala Palace 2"></li>
            <li><img data-original="../assets/img/tibet-6.jpg" src="../assets/img/thumbnails/tibet-6.jpg" alt="Potala Palace 3"></li>
            <li><img data-original="../assets/img/tibet-7.jpg" src="../assets/img/thumbnails/tibet-7.jpg" alt="Lhasa River"></li>
            <li><img data-original="../assets/img/tibet-8.jpg" src="../assets/img/thumbnails/tibet-8.jpg" alt="Namtso 1"></li>
            <li><img data-original="../assets/img/tibet-9.jpg" src="../assets/img/thumbnails/tibet-9.jpg" alt="Namtso 2"></li>
          </ul>
        </div>
      </div>
      <div class="col-sm-4 col-md-3">
        <h3 class="page-header">Methods</h3>
        <div class="docs-buttons" role="group">
          <div class="input-group">
            <input type="text" class="form-control" id="viewIndex" name="index" value="4" placeholder="index">
            <span class="input-group-btn">
              <button type="button" class="btn btn-primary" data-enable="inline" data-method="view" data-target="#viewIndex" title="View one of the images with image's index">View</button>
            </span>
          </div>
          <div class="input-group">
            <input type="text" class="form-control" id="zoomRatio" name="ratio" value="0.5" placeholder="ratio">
            <span class="input-group-btn">
              <button type="button" class="btn btn-primary" data-enable="inline" data-method="zoom" data-target="#zoomRatio" title="Zoom the image">Zoom</button>
            </span>
          </div>
          <div class="input-group">
            <input type="text" class="form-control" id="zoomToRatio" name="ratio" value="1" placeholder="ratio">
            <span class="input-group-btn">
              <button type="button" class="btn btn-primary" data-enable="inline" data-method="zoomTo" data-target="#zoomToRatio" title="Zoom the image to a special ratio">Zoom To</button>
            </span>
          </div>
          <div class="input-group">
            <input type="text" class="form-control" id="rotateDegrees" name="degrees" value="90" placeholder="degrees">
            <span class="input-group-btn">
              <button type="button" class="btn btn-primary" data-enable="inline" data-method="rotate" data-target="#rotateDegrees" title="Rotate the image">Rotate</button>
            </span>
          </div>
          <div class="input-group">
            <input type="text" class="form-control" id="rotateToDegrees" name="degrees" value="360" placeholder="degrees">
            <span class="input-group-btn">
              <button type="button" class="btn btn-primary" data-enable="inline" data-method="rotateTo" data-target="#rotateToDegrees" title="Rotate the image to a special angle">Rotate To</button>
            </span>
          </div>
          <div class="btn-group btn-group-justified" role="group">
            <div class="btn-group" role="group">
              <button type="button" class="btn btn-primary" data-arguments="[0.5]" data-enable="inline" data-method="zoom" title="Zoom in">Zoom In</button>
            </div>
            <div class="btn-group" role="group">
              <button type="button" class="btn btn-primary" data-arguments="[-0.5]" data-enable="inline" data-method="zoom" title="Zoom out">Zoom out</button>
            </div>
          </div>
          <div class="btn-group btn-group-justified" role="group">
            <div class="btn-group" role="group">
              <button type="button" class="btn btn-primary" data-arguments="[-90]" data-enable="inline" data-method="rotate" title="Rotate left">Rotate Left</button>
            </div>
            <div class="btn-group" role="group">
              <button type="button" class="btn btn-primary" data-arguments="[90]" data-enable="inline" data-method="rotate" title="Rotate right">Rotate Right</button>
            </div>
          </div>
          <div class="btn-group btn-group-justified" role="group">
            <div class="btn-group" role="group">
              <button type="button" class="btn btn-primary" data-arguments="[-1]" data-enable="inline" data-method="scaleX" title="Flip horizontal">Flip horizontal</button>
            </div>
            <div class="btn-group" role="group">
              <button type="button" class="btn btn-primary" data-arguments="[-1]" data-enable="inline" data-method="scaleY" title="Flip vertical">Flip vertical</button>
            </div>
          </div>
          <div class="btn-group btn-group-justified" role="group">
            <div class="btn-group" role="group">
              <button type="button" class="btn btn-primary" data-arguments="[-10,0]" data-enable="inline" data-method="move" title="Move left">Left</button>
            </div>
            <div class="btn-group" role="group">
              <button type="button" class="btn btn-primary" data-arguments="[10,0]" data-enable="inline" data-method="move" title="Move right">Right</button>
            </div>
            <div class="btn-group" role="group">
              <button type="button" class="btn btn-primary" data-arguments="[0,-10]" data-enable="inline" data-method="move" title="Move up">Up</button>
            </div>
            <div class="btn-group" role="group">
              <button type="button" class="btn btn-primary" data-arguments="[0,10]" data-enable="inline" data-method="move" title="Move down">Down</button>
            </div>
          </div>
          <div class="btn-group btn-group-justified" role="group">
            <div class="btn-group" role="group">
              <button type="button" class="btn btn-primary" data-enable="inline" data-method="prev" title="View previous image">Prev</button>
            </div>
            <div class="btn-group" role="group">
              <button type="button" class="btn btn-primary" data-enable="inline" data-method="next" title="View next image">Next</button>
            </div>
            <div class="btn-group" role="group">
              <button type="button" class="btn btn-primary" data-enable="inline" data-method="play" title="Play the images">Play</button>
            </div>
            <div class="btn-group" role="group">
              <button type="button" class="btn btn-primary" data-enable="inline" data-method="stop" title="Stop the playing">Stop</button>
            </div>
          </div>
          <div class="btn-group btn-group-justified" role="group">
            <div class="btn-group" role="group">
              <button type="button" class="btn btn-primary" data-enable="modal" data-method="show" title="Show the viewer">Show</button>
            </div>
            <div class="btn-group" role="group">
              <button type="button" class="btn btn-primary" data-method="hide" title="Hide the viewer" disabled>Hide</button>
            </div>
            <div class="btn-group" role="group">
              <button type="button" class="btn btn-primary" data-enable="inline" data-method="full" title="Enter modal mode">Full</button>
            </div>
            <div class="btn-group" role="group">
              <button type="button" class="btn btn-primary" data-method="exit" title="Exit modal mode" disabled>Exit</button>
            </div>
          </div>
          <button type="button" class="btn btn-block btn-primary" data-enable="inline" data-method="reset">Reset</button>
          <button type="button" class="btn btn-block btn-primary" data-enable="inline" data-method="tooltip">Tooltip</button>
          <button type="button" class="btn btn-block btn-danger" data-enable="modal inline" data-method="destroy">Destroy</button>
        </div>
      </div>
    </div>
  </div>

  <!-- Footer -->
  <footer class="docs-footer">
    <div class="container">
      <p class="heart"></p>
    </div>
  </footer>

  <!-- Scripts -->
  <script src="../assets/js/jquery.min.js"></script>
  <script src="../assets/js/bootstrap.min.js"></script>
  <script src="../dist/viewer.js"></script>
  <script src="js/main.js"></script>
</body>
</html>
